<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<title>节点追加</title>
<!-- 父子节点 兄弟节点prev next
 遍历节点 -->
<!-- find prev next children parent each 遍历节点 -->
<!-- find是所有元素的后代  children只是子元素的后代 -->
</head>
<style>
	.yellow{
		background-color: yellow;
	}
</style>

<body>
<ul id="fruitlist">
<h3>水果列表</h3>
<li>梨子</li>
<li id="apple">苹果</li>
<!-- <span>藏花果</span> -->
<li><span id="banana">香蕉</span></li>
<li>雪莲果</li>	
</ul>
<button>点击我</button>
<script>
$(function(){
$('button').click(function(){
	 $('#apple').nextAll().addBack().text('榴莲').addClass('yellow');
												// .removeClass
												// .toggleClass
	
	
	
	// // // $('#apple').nextAll().text('橘子');
	// // $('#apple').prevAll().text('板栗');
	// $('#apple').nextAll().addBack().text('榴莲');//返回自己
	
	
	// $('#banana').parent().after('<li>雪莲果</li>');
	
	// console.log($('ul').find('span'));
	// // console.log($('ul').children());
	
	// // //next 遍历下个节点
	// // $('#apple').next().after('<li>水蜜桃</li>')
	
	
	// // $('#fruitlist').append('<li>水蜜桃</li>	')
	// // $('#apple').before('<li>水蜜桃</li>')
	



})
})
</script>
</body>
</html>